*::after,
*::before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.scene {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(#a6d8ff, #fff, #fff);
}

.dark .scene {
  background: #222833;
}

.sun {
  position: absolute;
  top: 100px;
  left: 35%;
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 50px #fff;
  cursor: pointer;
  transition: 0.5s;
}

.dark .sun {
  left: 65%;
  box-shadow: 0 0 0 #fff;
}

.dark .sun::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 20px;
  width: 100%;
  height: 100%;
  background: #222833;
  border-radius: 50%;
}

.bg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 445px;
  background: url(./city.png);
  background-size: 1344px;
  background-repeat: repeat-x;
  animation: animateBg 15s linear infinite;
}

@keyframes animateBg {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: 1344px;
  }
}
